<template>
	<view class="order-container">
		<c-layout>
			<c-navigation-bar slot="head" @inputEvent="inputEvent" :is-search="true" @searchEvent="searchEvent">
			</c-navigation-bar>
			<view class="container-box">
				<view class="order-status">
					<u-subsection height="100" inactive-color="#999CAD" font-size="36" active-color="#2934D0" :bold="false"
						:list="orderStatusList" @change="subSectionChange" :current="orderStatusCurrent"></u-subsection>
				</view>
				<view class="order-list">
					<view class="order-item" v-for="(item,index) in orderList" :key="index">
						<orderCard :btnText="btnTextList[orderStatusCurrent]" @pay="pay" @click="cardClick(item)"
							:orderDetails="item" :time="orderStatusCurrent === 2||orderStatusCurrent === 3?item.time:''"></orderCard>
					</view>
				</view>
			</view>
		</c-layout>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 订单状态列表
				orderStatusList: [
					{
						name: this.$t('orderDetails.Unpaid')
					},
					{
						name: this.$t('orderDetails.UnShipped')
					},
					{
						name: this.$t('orderDetails.Shipped')
					},
					{
						name: this.$t('orderDetails.Evaluate')
					},
				],
				btnTextList: [this.$t('orderDetails.payment'), this.$t('orderDetails.logistics'), '', ''],
				// 当前选中订单状态
				orderStatusCurrent: 0,
				// 订单列表
				orderList: [{
						imgSrc: '../../static/images/home/good-2.png',
						price: 40,
						name: 'Realize Syirian children drea..',
						des: 'By: Black Heart Institution',
						time: '2022.12.31 12:48'
					},
					{
						imgSrc: '../../static/images/home/good-1.png',
						price: 40,
						name: 'Disasters on Two Coasts: Ho..',
						des: 'By: Love Bird Organization',
						time: '2022.12.31 12:48'
					},
					{
						imgSrc: '../../static/images/home/good-2.png',
						price: 40,
						name: 'This Island Has No Bridges W..',
						des: 'By: One Heart Way',
						time: '2022.12.31 12:48'
					},
					{
						imgSrc: '../../static/images/home/good-2.png',
						price: 40,
						name: 'This Island Has No Bridges W..',
						des: 'By: One Heart Way',
						time: '2022.12.31 12:48'
					},
					{
						imgSrc: '../../static/images/home/good-2.png',
						price: 40,
						name: 'This Island Has No Bridges W..',
						des: 'By: One Heart Way',
					},
					{
						imgSrc: '../../static/images/home/good-2.png',
						price: 40,
						name: 'This Island Has No Bridges W..',
						des: 'By: One Heart Way',
					},
				],
			};
		},
		methods: {
			inputEvent() {},
			searchEvent() {},
			// 条件变化
			subSectionChange(val) {
				this.orderStatusCurrent = val
			},
			// 获取订单列表
			getOrderListAjax() {
				// this.$u.post().then(res => {
				// 	this.orderList = res.data
				// })
			},
			cardClick(item) {
				console.log(this.orderStatusCurrent);
				if (this.orderStatusCurrent === 2) {
					uni.navigateTo({
						// 暂时没写id字段
						url: "/pages/orderDetails/orderDetails?id=" + ('6' || item.id) + '&type=' + this
							.orderStatusCurrent
					})
				}

			},
			// 付款按钮
			pay(item) {
				console.log(item);
				uni.navigateTo({
					// 暂时没写id字段
					url: "/pages/orderDetails/orderDetails?id=" + ('6' || item.id) + '&type=' + this
						.orderStatusCurrent
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-container {
		height: 100vh;

		.container-box {
			height: 100%;
			display: flex;
			flex-direction: column;

			.order-status {
				width: 100%;

				/deep/>.u-subsection {
					background-color: transparent !important;

					.u-item-bg {
						height: 4rpx !important;
						background-color: #2934D0 !important;
					}

					.u-item {
						width: fit-content !important;
					}
				}
			}

			// 订单列表
			.order-list {
				flex: auto;
				overflow-y: auto;
				margin-top: 50rpx;

				>.order-item {
					padding: 30rpx 0;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						width: 100%;
						height: 2rpx;
						background-color: #E1E8E8;
						bottom: 0;
					}

				}
			}
		}
	}
</style>